<template>
    <div class="box">
        <h3>sass动态样式集成</h3>
        <ul>
            <li>vue模块化项目安装sass动态语言编译包：nmp install sass -D</li>
            <li>vue模块化项目必须提供对应的加载功能 npm install sass-loader -D</li>
            <li>
                安装完成后 .sass 文件定义的sass 样式就直接可以和.css文件在vue 环境中的使用方式一致
            </li>
            <li>.vue 的style 标签如果需要使用 ，必须定义 lang="scss|sass" (scss带有高亮显示)的语言描述戴拿</li>
        </ul>

    </div>
    <div class="test-box">
        <span>sass样式</span>
        <br>
        <strong>测试</strong>
        <SassChild1></SassChild1>

    </div>
</template>
<script>
import SassChild1 from './components/SassChild1.vue'
export default {
    components: {
        SassChild1,
    }
}
</script>
<style scoped lang="scss">
.test-box{
    margin-top: 20px;
    span{
        color:$fontColor;
        &:hover{
            color: lighten($fontColor,50%);
        }
    }
         strong {
             color: var(--fc);
         }
}
</style>